<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<view class="back-arrow"></view>
			</view>
			<view class="nav-title">专业洗车</view>
			<view class="nav-right">
				<!-- 右上角图标区域，可根据需求补充 -->
			</view>
		</view>
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input">
				<image src="/static/image/search.png" class="search-icon"></image>
				<input type="text" placeholder="输入需要搜索的内容" />
			</view>
		</view>
		<!-- 历史记录 -->
		<view class="history-section">
			<text class="history-title">历史记录：</text>
			<view class="history-tags">
				<text class="tag" v-for="(tag, index) in historyTags" :key="index">{{ tag }}</text>
			</view>
		</view>
		<!-- 洗车列表 -->
		<view class="wash-list">
			<view class="wash-item" v-for="(item, index) in washItems" :key="index" @click="gotodetail">
				<view class="item-top">
					<text class="item-name">{{ item.name }}</text>
					<text class="item-distance">{{ item.distance }}</text>
				</view>
				<view class="item-meta">
					<image :src="item.image" class="item-image"></image>
					<view class="item-info">
						<view class="item-rating">
							<!-- 动态渲染实心星 -->
							<image src="/static/image/star.png" class="star-icon" v-for="i in item.score"
								:key="`active-${i}`"></image>
							<!-- 动态渲染空心星 -->
							<image src="/static/image/start0.png" class="star-icon" v-for="i in 5 - item.score"
								:key="`inactive-${i}`"></image>
							<text class="item-score">{{ item.score }}分</text>
							<text class="item-sales">销量：{{ item.sales }}</text>
						</view>
						<text class="item-time">营业时间：周一至周五 早上8:00-晚上22:00</text>
						<text class="item-address">山阳区人民路与解放路交叉口</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 历史记录标签
	const historyTags = ref([
		'飞飞汽车美容店',
		'飞飞汽修美容店',
		'飞飞汽车美容店',
		'飞飞汽修美容店',
		'飞飞汽修美容店',
		'汽车美容店',
		'汽修美容店'
	]);

	// 洗车店铺列表数据
	const washItems = ref([{
			name: '车百事汽车生活馆',
			distance: '896m',
			image: '/static/image/ren.png',
			sales: 556,
			score: 2
		},
		{
			name: '车百事汽车生活馆',
			distance: '589m',
			image: '/static/image/ren.png',
			sales: 556,
			score: 3
		},
		{
			name: '车百事汽车生活馆',
			distance: '9.3km',
			image: '/static/image/ren.png',
			sales: 556,
			score: 4
		},
	]);

	// 返回上一页
	const goBack = () => {
		uni.navigateBack();
	};
	const gotodetail = () => {
		// 跳转车站详情
		uni.navigateTo({
			url: '/pages/index/washCar/detail/detail'
		});
	};
</script>

<style scoped>
	.container {
		background-color: #F5F7FA;
		min-height: 100vh;
	}

	/* 导航栏 - 蓝色背景 */
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		padding-top: calc(20rpx + env(safe-area-inset-top));
		background-color: #2176FF;
		/* 导航栏蓝色背景 */
	}

	.nav-left {
		width: 80rpx;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.back-arrow {
		width: 24rpx;
		height: 24rpx;
		border-left: 4rpx solid #fff;
		border-bottom: 4rpx solid #fff;
		transform: rotate(45deg);
		margin-left: 10rpx;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}

	.nav-right {
		width: 80rpx;
	}

	/* 搜索栏 - 白色背景 */
	.search-bar {
		padding: 15rpx 20rpx;
		background-color: #2176FF;
	}

	.search-input {
		display: flex;
		align-items: center;
		background-color: #F5F7FA;
		border-radius: 25rpx;
		padding: 10rpx 20rpx;
	}

	.search-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	input {
		flex: 1;
		font-size: 14px;
	}

	/* 历史记录区域 - 白色背景 */
	.history-section {
		padding: 15rpx 20rpx;
		background-color: #2176FF;
	}

	.history-title {
		font-size: 14px;
		color: #E8F3FF;
	}

	.history-tags {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;
	}

	.tag {
		background-color: #E8F3FF;
		color: #2176FF;
		font-size: 12px;
		padding: 5rpx 15rpx;
		border-radius: 15rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	/* 洗车列表 - 白色背景项 */
	.wash-list {
		margin-top: 10rpx;
	}

	.wash-item {
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 10rpx;
		border-bottom: 1px solid #eee;
	}

	.item-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.item-name {
		font-size: 16px;
		font-weight: bold;
	}

	.item-distance {
		font-size: 14px;
		color: #2176FF;
	}

	.item-meta {
		display: flex;
		align-items: flex-start;
	}

	.item-image {
		width: 150rpx;
		height: 100rpx;
		border-radius: 8rpx;
		margin-right: 15rpx;
	}

	.item-info {
		flex: 1;
	}

	.item-rating {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.star-icon {
		width: 20rpx;
		height: 20rpx;
		margin-right: 5rpx;
	}

	.item-score {
		font-size: 14px;
		margin-right: 15rpx;
	}

	.item-sales {
		font-size: 12px;
		color: #999;
	}

	.item-time,
	.item-address {
		display: block;
		font-size: 12px;
		color: #666;
		margin-bottom: 5rpx;
	}
</style>